import React, { useState, useEffect } from "react";
import './index.scss'
import { Input, Button, Table, Modal, message, List, Checkbox, Col, Row } from "antd";
import { getUser,getUserInfoListApi } from "../../../api/user"
const AddUser = ({ visible,selectUserId, updateData }) => {
  console.log("1111")
  const [initLoading, setInitLoading] = useState(true);
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState([]);  // 左边用户数据
  const [list, setList] = useState([]);
  const [page, setPage] = useState(1);
  const [checkList, setCheckList] = useState([]); //选中的人员id
  const [checkUser,setCheckUser] = useState([]) // 选中的人员
  // 用户数据
  const [userList, setuserList] = useState([]);
  useEffect(() => {
    getUserData(1)
    selectedList()
  }, [])
  //获取用户列表
  const getUserData = async (pageNum) => {
    console.log('获取用户列表')
    const res = await getUser({ pageNum: pageNum, pageSize: 10, userNane: '' })
    if (res.code === 200) {
      const dataNew = res.data.list
      setData(data => [...data, ...dataNew])
      setInitLoading(false)
    }
  }
  // 右边人员列表
const selectedList = async () => {
  const ids = selectUserId
  if (ids.length) {
    const res = await getUserInfoListApi({ userIds: ids })
    if (res.code === 200) {
      setCheckList(ids) 
      setCheckUser(res.data)
      setuserList(res.data)
    }
  }
}
  const onLoadMore = () => {
    const nextPage = page + 1;
    setPage(nextPage);
    getUserData(nextPage)
  };
  const onChange = async(checkedValues) => {
    console.log(checkedValues,'checked')
    if(selectUserId.length){ //  有默认数据
      let a = data.filter(item => selectUserId.includes(item.id))
      console.log(a)
      if(a.length===0){ // 默认数据不在当前页
       let user = data.filter(item => checkedValues.includes(item.id))
       setCheckUser([...userList,...user])
      }else{
        setCheckUser(data.filter(item => checkedValues.includes(item.id)))
      }
    }else{
      setCheckList(checkedValues)
      setCheckUser(data.filter(item => checkedValues.includes(item.id)))
    }
  };
  const addRole = async () => {
    updateData(false,checkUser)
  }
  const closeModel = () => {
    updateData(false)
  }
  const loadMore =
    !initLoading && !loading ? (
      <div
        style={{
          textAlign: 'center',
          marginTop: 12,
          height: 32,
          lineHeight: '32px',
        }}
      >
        <Button onClick={onLoadMore}>loading more</Button>
      </div>
    ) : null;
  return (
    <Modal title='新增绑定' open={visible} onOk={addRole} onCancel={closeModel}>
      <p>{checkList}</p>
      <div className="user-box d-flex">
        <div className="left">
          <div className="top">
            <Input></Input>
          </div>
          <div className="container">
            {/* <Checkbox.Group value={checkList} onChange={onChange}>
              <List
                className="demo-loadmore-list"
                loading={initLoading}
                itemLayout="horizontal"
                loadMore={loadMore}
                dataSource={data}
                renderItem={item => (
                  <List.Item>
                    <Checkbox value={item.id}>{item.name}</Checkbox>
                  </List.Item>
                )}
              />
            </Checkbox.Group> */}
            <Checkbox.Group style={{ width: '100%' }} onChange={onChange}  defaultValue={selectUserId}>
               <List
                className="demo-loadmore-list"
                loading={initLoading}
                itemLayout="horizontal"
                loadMore={loadMore}
                dataSource={data}
                renderItem={item => (
                  <List.Item>
                    <Checkbox value={item.id}>{item.name}</Checkbox>
                  </List.Item>
                )}
              />
            </Checkbox.Group>
          </div>
        </div>
        <div className="right">
            <List
                className="demo-loadmore-list"
                loading={initLoading}
                itemLayout="horizontal"
                loadMore={loadMore}
                dataSource={checkUser}
                renderItem={item => (
                  <List.Item>{item.name}</List.Item>
                )}
              />
        </div>
      </div>
    </Modal>
  )
}
export default AddUser